As with many kinds of apps, there are difficult issues to solve when we write apps for JavaScript. In this article, we’ll look at some solutions to common JavaScript problems.
Check if Arrow Keys are Pressed
We can check if an arrow key is pressed with the which property of the event object.
To do that, we can write:
document.onkeydown = (e) => {
switch(e.which) {
case 37:
break;
case 38:
break;
case 39:
break;
case 40:
break;
default:
return;
}
e.preventDefault();
};
We watch the key down event by setting an event handler to the onkeydown method of document .
Then inside the function, we get the which property to check the key code.
37 is the left key.
38 is the up key.
39 is the right key.
40 is the down key.
We also have to call preventDefault() to prevent the default action, which is scrolling and moving the cursor.
Check if an Element Exists in the Visible DOM
We can check if an element exists by selecting it in the DOM.
If it’s visible then the element will be returned.
To do that, we can use document.getElementById to get an element by ID.
document.querySelector gets an element by any selector.
document.querySelectorAll gets a group of elements by any selector.
documebt.getElementsByClassName gets a group of elements by class name.
document.getElementsByName gets a group of elements by their name attribute value.
The ones that return groups have a length property, so we can use that to check if there is anything.
For instance, we can write:
const foo = document.querySelector('#foo');
to get an element with the ID foo if it’s visible.
Converting a JavaScript Object to an Array
We can convert a JavaScript object to an array with the Object.keys and map methods.
For instance, we can write:
const obj = { 1: 'foo', 2: 'bar' };
const arr = Object.keys(obj).map((key) => obj[key]);
We call the Object.keys to get the keys. Then we return the value in the map callback.
Also, we can use the Object.values method to get the values as an array:
const arr = Object.values(obj);
Underscore and Lodash also have the values method:
const arr = _.values(obj);
Contains Case Insensitive
We can check if a substring is in a string in a case-insensitive way by using the toLowerCase and indexOf methods.
For example, we can write:
if (str.toLowerCase().indexOf("foo") === -1) {
//...
}
We can also use regex to do the check:
if (!/Foo/i.test(str)) {
//...
}
i means case insensitive.
We can replace the indexOf method with the includes method:
if (str.toLowerCase().includes("foo")) {
//...
}
or:
if (str.toLowerCase().includes("foo".toLowerCase())) {
//...
}
How to Append Data to div
To append data to a div, we can append it using the innerHTML property.
For instance, we can write:
const div = document.getElementById('div');
div.innerHTML += 'more data';
We get the div and append more data toinnerHTML .
We can also create a text node and call appendChild to append it to the div:
const div = document.getElementById("div");
const content = document.createTextNode("more stuff");
div.appendChild(content);
Get the Rendered Height of an Element
We can get the height of an element with the clientHeight property.
It’s the total of the height of the element, padding, and height of the horizontal scrollbar if it exists.
Then we can write:
document.getElementById('div').clientHeight;
There’s also the offsetHeight property.
It includes the CSS height, borders, padding, and horizontal scrollbar if it exists.
For example, we write:
document.getElementById('div').offsetHeight;
Check if an Array Contains any Element of Another Array
To check if an array has an element of another array, we can use the some and includes methods.
For example, we can write:
const hasElement = arr1.some(r => arr2.includes(r))
We use the some method to check if any element in arr1 meets the condition returned in the callback.
arr2.includes(r) checks if an item in arr2 is included in arr1 .
Conclusion
We can check if an array has an entry of another array with the some and includes methods. We can check if arrow keys are pressed by checking a few key codes. Also, we can use a few methods to convert an object to an array.
